import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, DatePicker, message, Button } from 'antd';
import { findDistinctStubList } from "../../../fetch/fetchApi";
import GridTable from '../../../components/display/gridTable';
import StubDetail from '../../operation/stubQuery/stubDetail';

let isInitPagination = false;
const stubGroupType = {
    '0': '公共',
    '1': '个人',
    '2': '专用开放',
    '3': '专用内部'
};
const opType = {
    '0': '非自营桩群',
    '1': '自营桩群'
};
class StubList extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            gridData: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10'
        };
        this.tableColumns = [
            {
                title: '电站名称',
                dataIndex: 'name',
                key: 'name',
                fixed: 'left',
                width: 100,
                className: 'column-nowrap',
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
            {text}
            </Tooltip>)
            }, {
                title: '直流数',
                dataIndex: 'dcStubCnt',
                key: 'dcStubCnt',
            }, {
                title: '交流数',
                dataIndex: 'acStubCnt',
                key: 'acStubCnt',
            }, {
                title: '计费标准',
                dataIndex: 'totalFeeInfo',
                key: 'totalFeeInfo',
                className: 'column-nowrap',
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text && text.replace(/#/g, '\n')}>
            {text}
            </Tooltip>)
            }, {
                title: '电站城市',
                dataIndex: 'cityStr',
                key: 'cityStr',
            }, {
                title: '运营类型',
                dataIndex: 'type',
                key: 'type',
                render: (text) => (
                    <div>{opType[text]}</div>
                )
            }, {
                title: '电站类型',
                dataIndex: 'stubGroupType',
                key: 'stubGroupType',
                className: 'column-nowrap',
                render: (text) => (
                    <div>{stubGroupType[text]}</div>
                )
            }, {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 100,
                render: (text, record) => (
                    <div className="action-wrap">
            <a href="javascript:void(0);" onClick={() => this.showStubDetailModal(record.key)}>电站详情</a>
            </div>
                )
            }
        ];
    }

    showStubDetailModal = (stubGroupId) => {
        this.setState({
            stubGroupId: stubGroupId,
            stubDetailVisible: true
        })
    }

    findDistinctStubList = (params = {}) => {
        this.setState({
            stubListLoading: true
        })
        findDistinctStubList(this.query).then((res) => {
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = params.current || 1;
            if (!isInitPagination) {
                isInitPagination = true;
                pagination.onChange = (page, pageSize) => {
                    this.query["page"] = page;
                    this.query["pagecount"] = pageSize;
                    this.findDistinctStubList({
                        current: page
                    });
                }
            }
            this.setState({
                gridData: res.data.data,
                stubListLoading: false
            });
        });
    }

    queryHandler = (e) => {
        this.findDistinctStubList();
    }

    componentDidMount() {
        this.query["stubGroupIds"] = this.props.stubGroupIds;
        this.findDistinctStubList();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.stubGroupIds !== this.props.stubGroupIds) {
            this.query["stubGroupIds"] = nextProps.stubGroupIds;
            this.query["page"] = 1;
            this.findDistinctStubList();
        }
    }

    handleStubDetailModalCancel =() => {
        this.setState({
            stubDetailVisible: false
        })
    }

    handleStubDetail = () => {
        this.setState({
            stubGroupId: ""
        })
    }

    render() {
        return (
            <div className="sc-page-content">

                <div className="page-panel">
                    <GridTable postyle="table-center" data={this.state.gridData} loading={this.state.stubListLoading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>

                <Modal width="800px" title="电站详情" visible={this.state.stubDetailVisible} footer={null} onCancel={this.handleStubDetailModalCancel}>
                    <StubDetail stubGroupId={this.state.stubGroupId} handle={this.handleStubDetail}/>
                </Modal>
            </div>
        )
    }
}
export default StubList;
